<template>
	<view :class="config.style">
		<FullscreenLoading :loading="loading"></FullscreenLoading>
		<!--核销码页面-->
		<view class="verification-section">
			
			<view class="user">
				<view class="avatar">
					<image class="image" :src="verification.user_info!==undefined?verification.user_info.avatar:''"></image>
				</view>
				<view class="nickname">{{verification.user_info.nickname}}</view>
			</view>
			
			
			<view class="title">
				活动信息
			</view>
			<view class="activity">
				<view class="cover">
					<image mode="widthFix" :src="activity.cover_400" @error="imageError" class="image"></image>
				</view>
				<view class="info">
					<view class="title text-ellipsis-2">{{activity.title}}</view>
					<view class="description text-ellipsis">{{activity.description}}</view>
				</view>
			</view>
			
			<view class="title">
				地点/时间
			</view>
			<view class="time-and-address">
				<view class="time">
					<view class="icon">
						<text class="iconfont">&#xe60e;</text>
					</view>
					<view class="info">
						{{activity.start_time_str}} - {{activity.end_time_str}}
					</view>
				</view>
				<view class="address" @click="goToMapPage(activity.point)">
					<view class="icon">
						<text class="iconfont">&#xe633;</text>
					</view>
					<view class="info text-ellipsis">
						{{activity.province}} {{activity.district}} {{activity.city}} {{activity.address}}
					</view>
					<view class="active">
						<uni-icons type="arrowright" size="14" color="#999999"></uni-icons> 
					</view>
				</view>
			</view>
			
			<template v-if="verification.status == 0">
				<view class="qrcode">
					<ayQrcode ref="qrcode" :modal="modal_qr" :url="qrcodeUrl" @hideQrcode="hideQrcode" :width="260" :height="260"/>
				</view>
				<view class="remark">
					<text>
						请提前出示核销码，以便核销工作人员扫码确认
					</text>
				</view>
			</template>
			<template v-if="verification.status == 1">
				<view class="status">
					<text>已核销</text>
				</view>
				<view class="v-time">
					{{verification.verification_time_str}}
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	//全屏加载中
	import FullscreenLoading from '@/components/muu-fullscreen-loading/muu-fullscreen-loading.vue'
	//生成二维码
	import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
	export default {
		components: {
			FullscreenLoading,
			ayQrcode
		},
		data() {
			return {
				loading: true,
				urlParams: {}, //url传递过来的参数
				id: 0, //核销数据ID
				products_id : 0, //活动ID
				verification : '',
				qrcodeUrl: '',
				activity: {},
				modal_qr: false,
			}
		},
		onLoad(options) {
			//获取url参数
			this.urlParams = options
			this.id = options.id
			this.products_id = options.products_id
			console.log(this.urlParams,'urlparams')
			Promise.all([this.getVerification(),this.getProduct()]).then(res => {
				if(this.verification.status == 0){
					this.showQrcode();//一加载生成二维码
				}
				
				//加载完成
				this.loading = false
			})
			
		},
		computed: {
			...mapState(['config'])
		},
		methods: {
			/**
			 * 获取核销数据及二维码图片路径
			 */
			getVerification(){
				let that = this
				return new Promise((resolve, reject) => {
					let data = {}
						data.action = 'qrcode'
						data.id = this.id
					//获取数据
					let url = '';
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/verification'
						data.m = 'muu_activity'
						//#endif
						//#ifdef H5
						url = 'entry/site/verification'
						data.m = 'muu_activity'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.verification = res.data.data
								that.qrcodeUrl = res.data.data.qrcode_url
							}
							resolve(res.data)
						}
					})
				})
			},
			
			getProduct(){
				let that = this
				return new Promise((resolve, reject) => {
					let params = this.urlParams
					let data = {}
						data.action = 'detail'
						data.id = this.products_id
					//获取数据
					let url = '';
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/activity'
						data.m = 'muu_activity'
						//#endif
						//#ifdef H5
						url = 'entry/site/activity'
						data.m = 'muu_activity'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.activity = res.data.data
							}
							resolve(res.data)
						}
					})
				})
			},
			// 展示二维码
			showQrcode() {
				let _this = this;
				this.modal_qr = true;
				setTimeout(function() {
					_this.$refs.qrcode.crtQrCode()
				}, 80)
			},
			//传入组件的方法
			hideQrcode() {
				this.modal_qr = false;
			},
			
			/**
			 * 进入地图页面
			 * @param {Object} latitude
			 * @param {Object} longitude
			 */
			goToMapPage: function(){
				let that = this
				let point = this.activity.point.split(",");// 在每个逗号(,)处进行分解。
				console.log(point)
				let latitude = parseFloat(point[1])
				let longitude = parseFloat(point[0])
				let name = '活动地址'
				let address = this.activity.province + this.activity.district + this.activity.city + this.activity.address
				// #ifdef MP-WEIXIN || H5
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					name: name,
					address: address,
					success: ()=> {
						console.log('success');
					},
					fail: ()=> {
						uni.showModal({
							content: '打开地图失败,请重试'
						})
					},
				})
				// #endif
				
				// #ifdef APP-PLUS
				let urlParams = 'latitude='+latitude+'&longitude='+longitude
				let url = '../map/map?' + urlParams
				console.log(url)
				//指定跳转地址
				uni.navigateTo({
					url: url
				});
				// #endif
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
	.verification-section {
		.title {
			padding: 20rpx 20rpx 10rpx 20rpx;
			font-size: 30rpx;
			font-weight: 700;
		}
		.user {
			.avatar {
				position: relative;
				width: 115rpx;
				height: 115rpx;
				border-radius: 50%;
				overflow: hidden;
				margin: 20rpx auto;
				overflow: hidden;
				z-index: 2;
				.image {
					width: 115rpx;
					height: 115rpx;
					display: block;
					z-index: 1;
				}
			}
			.nickname {
				text-align: center;
				font-size: 28rpx;
			}
		}
		.activity {
			display: flex;
			padding: 20rpx;
			background-color: #fff;
			.cover {
				width: 280rpx;
				.image {
					border-radius: 10rpx;
					width: 100%;
					height: auto;
					display: block;
				}
			}
			.info {
				flex: 1;
				padding-left: 20rpx;
				.title {
					font-size: 28rpx;
					color: #000;
					font-weight: 600;
					height: 72rpx;
					line-height: 36rpx;
					padding: 0;
				}
				.description {
					color: #999;
					font-size: 24rpx;
					padding: 0;
				}
			}
		}
		.time-and-address {
			background-color: #fff;
			margin-bottom: 16rpx;
			font-size: 26rpx;
			color: #999;
			padding: 10rpx 0;
			.time {
				display: flex;
				padding: 10rpx 20rpx;
				
				.icon {
					width: 40rpx;
				}
				.info {
					flex: 1
				}
			}
			.address {
				display: flex;
				padding: 10rpx 20rpx;
				.icon {
					width: 40rpx;
				}
				.info {
					flex: 1
				}
				.active {
					width: 40rpx;
				}
			}
		}
		.qrcode {
			margin: 20rpx auto;
			
		}
		.remark {
			padding: 20rpx;
			color: #999;
			font-size: 26rpx;
			text-align: center;
		}
		
		.status {
			padding: 20rpx;
			font-size: 28rpx;
			text-align: center;
		}
		.v-time {
			padding: 20rpx;
			font-size: 28rpx;
			text-align: center;
		}
	}
</style>
